<template>
	<view>
		<view class="ques-item" v-for="(item,index) in list" :key="index">
			<view>
				<view class="title">
					<text style="color: red;">*</text>
					{{ item.questionNumber }}、{{ item.questionName }}
				</view>
				<!--文本框-->
				<view v-if="item.type==='text_int'||item.type==='auto_compute'||item.type==='text'">
					<input type="text" class="input-txt" @input="setInputValue($event, item)" v-model="item.fValue"
						:class="{'disable-css': item.type==='auto_compute'}" :disabled="item.type==='auto_compute'" />
					<view class="desc" v-if="item.range">范围: {{item.range}}</view>
				</view>
			</view>

			<!--单选-->
			<view v-if="item.type=='single_choice' && item.options && item.options.length>0">
				<radio-group @change="setInputValue($event, item)">
					<view class="radio-item" v-for="(item1, index) in item.options" :key="index+item1.value">
						<label>
							<radio :value="item1.value" color="#42b983"/>
							{{item1.name}}
						</label>
					</view>
				</radio-group>
			</view>

      <!--复选-->
      <view v-if="item.type=='checkbox' && item.options && item.options.length>0">
        <checkbox-group @change="setInputValue($event, item)">
          <view class="radio-item" v-for="(item1, index) in item.options" :key="index+item1.value">
            <label>
              <checkbox :value="item1.value" :checked="item1.checked" color="#42b983"/>{{item1.name}}
            </label>
          </view>
        </checkbox-group>
      </view>

			<!--子项-->
			<view v-if="item.type=='sub_question' && item.subQuestions && item.subQuestions.length>0">
				<QuestionnaireList :list='item.subQuestions' @answer="answerFn" />
			</view>
		</view>

		<!-- 		<view class="normal-btn" @click="submit" v-if="topNode">提交问卷</view>
		<view class="blank" v-if="topNode"></view>
		<view class="blank" v-if="topNode"></view>
		<view class="blank" v-if="topNode"></view> -->

	</view>
</template>

<script>
	/**
	 * 问卷列表
	 */
	export default {
		name: 'QuestionnaireList',
		data() {
			return {
				answerList: [],
				bodyH: 0,
				bodyW: 0
			}
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		methods: {
			answerFn(item) {
				console.log(JSON.stringify(item))
				this.$emit("answer", item)
			},
			setInputValue(e, item) {
				let val = e.detail.value
				item.fValue = val
				this.$emit("answer", item)
			},

		}
	}
</script>
<style lang="scss" scoped>
	.ques-item {
		padding: 15px;
		font-size: 18px;

		.title {
			padding: 5px 0;
		}

		.input-txt {
			line-height: 40px;
			border: 1px solid #f2f2f2;
			height: 40px;
			text-indent: 10px;
		}

		.radio-item {
			line-height: 40px;
			height: auto;
		}

		.desc {
			font-size: .8rem;
			color: #999;
			padding: 5px 0;
		}

		.disable-css {
			background-color: #f2f2f2;
		}

    //
	}
</style>